<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胖猫吃麦当劳</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <!-- 电脑屏幕边框 -->
    <div class="computer-frame">
        <!-- 浏览器顶部栏 -->
        <div class="computer-top-bar">
            <div class="browser-buttons">
                <div class="browser-button close-button"></div>
                <div class="browser-button minimize-button"></div>
                <div class="browser-button maximize-button"></div>
            </div>
            <div class="browser-address-bar">
                <i class="fas fa-lock"></i>
                fatcat-game.example.com
            </div>
        </div>
        
        <!-- 屏幕内容区域 -->
        <div class="computer-screen">
            <div class="device-frame">
                <!-- 设备按钮 -->
                <div class="device-button button-power"></div>
                <div class="device-button button-volume-up"></div>
                <div class="device-button button-volume-down"></div>
                <div class="device-button button-left"></div>
                <div class="device-button home-b2utton"></div>
                
                <div id="game-container">
                    <!-- 设备状态栏 -->
                    <div class="device-status-bar">
                        <div class="status-time">12:45</div>
                        <div class="status-icons">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div id="game-start">
                        <h1>胖猫吃麦当劳</h1>
                        <p>躲避叮咚鸡，收集麦当劳和可乐！</p>
                        <button id="start-button"><i class="fas fa-play"></i> 开始游戏</button>
                        <div class="game-instructions">
                            <p><i class="fas fa-arrow-left"></i> <i class="fas fa-arrow-right"></i> 左右移动</p>
                            <p><i class="fas fa-space-shuttle"></i> 空格键射击</p>
                        </div>
                    </div>
                    <div id="game-over" class="hidden">
                        <h1>游戏结束</h1>
                        <p>得分: <span id="final-score">0</span></p>
                        <button id="restart-button"><i class="fas fa-redo"></i> 重新开始</button>
                    </div>
                    <div id="game-canvas-container" class="hidden">
                        <div id="game-stats">
                            <div><i class="fas fa-heart"></i> <span id="health">3</span></div>
                            <div><i class="fas fa-bullseye"></i> <span id="bullets">10</span></div>
                            <div><i class="fas fa-star"></i> <span id="score">0</span></div>
                        </div>
                        <canvas id="game-canvas"></canvas>
                    </div>
                    
                    <!-- 屏幕反光效果 -->
                    <div class="device-glare"></div>
                </div>
                
                <!-- 设备阴影 -->
                <div class="device-shadow"></div>
            </div>
        </div>
    </div>
    
    <!-- 桌面和显示器底座 -->
    <div class="desk"></div>
    <div class="monitor-stand"></div>
    <div class="monitor-base"></div>
    
    <script src="game.js"></script>
    <script>
        // 更新状态栏时间
        function updateClock() {
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            
            // 格式化时间
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            
            document.querySelector('.status-time').textContent = hours + ':' + minutes;
        }
        
        // 初始更新时间
        updateClock();
        
        // 每分钟更新一次时间
        setInterval(updateClock, 60000);
    </script>
</body>
</html> 